React Suspense 및 Error Boundaries: 고급 로딩 및 오류 처리

React Suspense 및 Error Boundaries는 개발자가 더 탄력적이고 사용자 친화적인 애플리케이션을 구축할 수 있도록 해주는 강력한 기능입니다. 로딩 상태와 예상치 못한 오류를 선언적으로 처리하여 전반적인 사용자 경험을 개선하고 개발 프로세스를 단순화합니다. 이 기사에서는 기본 개념부터 고급 기술까지 모든 것을 다루면서 React Suspense 및 Error Boundaries를 효과적으로 사용하는 방법에 대한 포괄적인 가이드를 제공합니다.

React Suspense 이해

React Suspense는 일반적으로 비동기 작업의 데이터 가용성과 같은 특정 조건이 충족될 때까지 컴포넌트 렌더링을 "일시 중지"하는 메커니즘입니다. 이를 통해 데이터가 로드되는 동안 로딩 표시기와 같은 대체 UI를 표시할 수 있습니다. Suspense는 수동 조건부 렌더링의 필요성을 없애고 코드 가독성을 향상시켜 로딩 상태 관리를 단순화합니다.

Suspense의 주요 개념

• Suspense Boundaries: 일시 중지될 수 있는 컴포넌트를 감싸는 React 컴포넌트입니다. 래핑된 컴포넌트가 일시 중지되는 동안 표시할 대체 UI를 정의합니다.
• Fallback UI: 컴포넌트가 일시 중지되는 동안 표시되는 UI입니다. 일반적으로 로딩 표시기 또는 자리 표시자입니다.
• 비동기 데이터 가져오기: Suspense는 `fetch`, `axios` 또는 사용자 지정 데이터 가져오기 솔루션과 같은 비동기 데이터 가져오기 라이브러리와 원활하게 작동합니다.
• 코드 분할: Suspense는 코드 모듈 로딩을 지연시키는 데에도 사용할 수 있으므로 코드 분할을 활성화하고 초기 페이지 로드 성능을 향상시킬 수 있습니다.

Suspense의 기본 구현

다음은 데이터를 가져오는 동안 로딩 표시기를 표시하기 위해 Suspense를 사용하는 간단한 예입니다.

import React, { Suspense } from 'react';

// 데이터 가져오기 시뮬레이션(예: API에서)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Suspense가 사용할 수 있는 리소스 생성
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// 리소스에서 읽는 컴포넌트
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    사용자 데이터 로딩 중...